<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<title>商品搜索</title>
<link rel="stylesheet" href="css/site.css" />
<script type="text/javascript" src="js/baiduTemplate.js"></script>
<script src="js/jquery-2.2.0.min.js"></script>
<style>
.main{
position:relative;
left:auto;
top:auto;
margin:10% auto 0;
}
#result1{
	font-size:14px;
	width:700px;
	line-height:20px;
	text-align:left;
	margin:0 auto;
	padding-bottom:50px;
}
#result1 ul li{
    padding: 10px 0;
}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$("#search").click(function() {
			var keyWord = $('#keyWord').val();
			$.ajax({
				type : "GET",
				url : "SearchServlet",
				data : {
					keyWord : keyWord
				},
				success : function(data, textStatus) {
					var items = data.items;
					var bt = baidu.template;
					var html = bt('searchResult', data);
					//渲染
					document.getElementById('result1').innerHTML = html;
				}
			});
		});
	});
</script>
</head>
<body>
	<div class="main">
		<div class="logo">
			<img src="images/logo.png" alt="" />
		</div>
		<div class="search">
			<div class="search-input pull-left">
				<input type="text" name="keyWord" id="keyWord" value="" />
			</div>
			<div class="search-button pull-left blue-bg">
				<button class="white" type="button" value="搜索一下" id="search">搜索一下</button>
			</div>
		</div>
	</div>

	<div id='result1'></div>

	<!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 -->
	<script id="searchResult" type="text/html">
<div>
    <%if(items.length>1) { %>
        <ul>
            <!-- 循环语句 for-->
            <%for(var i=0;i<items.length;i++){%>
                <li><a href="<%=items[i].productUrl%>" target="view_window"><%=items[i].productName%>【价格】：<%=items[i].price%></a></li>
            <%}%>
        </ul>
    <%}else{%>
        <h2>查询无结果，请变更关键字</h2> 
    <%}%>
</div>  
</script>
</body>
</html>